﻿@{
    Layout = null;
}
<title>编辑 @ViewData["Title"]</title>
<link href="~/content/layui-v2.8.15/layui/css/layui.css" rel="stylesheet" />
<style>
    #saveBtn {
        position: fixed; /* 使按钮固定位置 */
        top: 0px; /* 距离顶部的距离 */
        right:80px; /* 距离右侧的距离 */
        z-index: 1000; /* 确保按钮位于其他内容之上 */
        padding: 10px 20px; /* 内边距，根据需要调整 */
        font-size: 16px; /* 字体大小 */
        color: #ffffff; /* 文字颜色 */
        background-color: #007bff; /* 背景颜色，这里使用了一种蓝色 */
        border: none; /* 移除边框 */
        cursor: pointer; /* 鼠标悬停时改变指针形状 */
        border-radius: 5px; /* 边角圆润 */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
        transition: all 0.3s ease; /* 添加过渡效果 */
    }

        /* 悬浮时的样式变化 */
        #saveBtn:hover {
            background-color: #0056b3; /* 悬浮时的背景颜色变深 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25); /* 悬浮时阴影加深 */
        }
</style>
<link rel="stylesheet" href="~/editor.md/css/editormd.min.css" />
<div id="editor">
    <button id="saveBtn">保存</button>
    <!-- Tips: Editor.md can auto append a `<textarea>` tag -->
    <textarea style="display:none;">@Html.Raw(ViewData["HtmlContent"])</textarea>
</div>
<script src="~/content/layui-v2.8.15/layui/layui.js"></script>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/editor.md/editormd.min.js"></script>
<script type="text/javascript">
    $(function () {
        var editor = editormd("editor", {
            width: "100%",
            height: "100%",
            markdown: "",     // dynamic set Markdown text
            path: "../editor.md/lib/"  // Autoload modules mode, codemirror, marked... dependents libs path
        });
    });

    $("#saveBtn").click(async function () {
        // 获取编辑器中的Markdown内容
        var element = $('[name="editor-markdown-doc"]').val();

        formdata = new FormData();
        formdata.append("Content", element);
        formdata.append("File", "@Html.Raw(ViewData["FilePath"])");
        try {
            let response = await fetch("/Home/SaveMarkdown", {
                method: 'POST',
                body: formdata
            });
        

            if (!response.ok) {
                layer.msg(`HTTP error! status: ${response.status}`);
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            // 如果有需要，可以处理成功的响应数据
            const result = await response.text();
            layer.msg(`status: ${response.status},` + "内容保存成功");
            console.log('Markdown内容保存成功');
        } catch (error) {
            console.error('保存Markdown内容时出错:', error);
        }

    });
</script>